<template>
	<view>
		<view class="video">
			<video id="myVideo" src="https://oss.laiba.shop/system/video/%E8%AF%BE%E7%A8%8B%E8%A7%86%E9%A2%911.mp4"
				@error="videoErrorCallback" controls>
			</video>
			<view class="title">金宝贝的早教世界</view>
		</view>
		<!-- <view class="video">
			<video id="myVideo" src="https://v.youku.com/v_show/id_XNDUzODEwMzYzMg==.html?spm=a2hcb.12675304.m_2569_c_8269.d_5&scm=20140719.rcmd.2569.video_XNDUzODEwMzYzMg%3D%3D"
				@error="videoErrorCallback" controls>
			</video>
			<view class="title">未来课程视频</view>
		</view> -->
		<view style="margin: 160rpx 0 20rpx 0;" @click="paySuccess">
			<Dbutton :btnTxt="btnTxt"></Dbutton>
		</view>
	</view>
</template>

<script>
	import Dbutton from '../../components/button.vue'
	export default {
		data() {
			return {
				btnTxt: '已看完 下一步',
				id: ''
			}
		},
		components: {
			Dbutton
		},
		computed: {
			
		},
		onLoad(option) {
			this.id = option.id
		},
		methods: {
			paySuccess() {
				uni.navigateTo({
					url: `./completed?id=${this.id}`
				})
			},
			videoErrorCallback(e) {
				console.log(e)
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
		},
	}
</script>

<style lang="scss">
	/* 清除浮动 */
	.clearfix:before,.clearfix:after{content:"";display:table}
	.clearfix:after{clear:both;}
	.clearfix{zoom:1}
	.video {
		text-align: center;
		padding-top: 100rpx;
		video {
			width: 660rpx;
			height: 369rpx;
		}
		.title {
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #000;
			padding-top: 10rpx;
		}
	}
	
</style>
